<template>
  <div class="newuser-pop">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="1.8rem">
      <el-row>
        <el-col :span="22">
          <el-row>
            <el-form-item label="姓名：" prop="personName">
              <el-input
                v-model="formData.personName"
                placeholder="请输入姓名"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="22">
          <el-row>
            <el-form-item label="密码：" prop="personPwd">
              <el-input
                v-model="formData.personPwd"
                placeholder="请输入密码"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="22">
          <el-row>
            <el-form-item label="用户ID：" prop="personCode">
              <el-input
                v-model="formData.personCode"
                placeholder="请输入用户ID"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="22">
          <el-row>
            <el-form-item label="身份识别卡信息：" prop="persionCard">
              <el-input
                v-model="formData.persionCard"
                placeholder="请输入身份卡信息"
                clearable
                :style="{width: '100%'}"
              />
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="22">
          <el-row>
            <el-form-item label="操作设备：" prop="deviceId">
              <el-select
                v-model="formData.deviceId"
                size="small"
                placeholder="请选择"
                multiple
                collapse-tags
                :style="{width: '100%'}"
              >
                <el-option
                  v-for="item in options"
                  :key="item.deviceCode"
                  :label="item.deviceName"
                  :value="item.deviceCode"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-row>
        </el-col>
        <el-col :span="24">
          <div class="btn-ground centerbox">
            <el-button class="table-query" type="primary" @click="submitForm">确认</el-button>
            <el-button class="table-query" type="primary" @click="cancelForm">取消</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import { LocksAPIModule } from "@/store/modules/locks";

@Component
export default class addposiman extends Vue {
  @Prop() dialogVisible!: boolean;
  options: any[] = [
    // {
    //   value: "全部",
    //   label: "全部",
    // },
    // {
    //   value: "有序",
    //   label: "有序",
    // },
    // {
    //   value: "无序",
    //   label: "无序",
    // },
  ];
  formData = {
    personName: "", // 名字
    personPwd: "", // 密码
    persionCard: "", //身份证识别卡
    personCode: "", //设备名称
    deviceId: [],
  };
  rules = {
    personName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    personPwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
    persionCard: [
      { required: true, message: "请输入身份卡信息", trigger: "blur" },
    ],
    personCode: [{ required: true, message: "请输入用户ID", trigger: "blur" }],
    deviceId: [{ required: true, message: "请选择设备", trigger: "change" }],
  };

  $refs!: {
    elForm: any;
  };
  get stationId() {
    return LocksAPIModule.stationId;
  }
  mounted() {
    if (this.options.length > 0) {
      return;
    } else {
      this.getLockList();
    }
  }
  getLockList() {
    var params = {
      stationId: this.stationId,
    };
    (this as any).$services
      .getLockList({ data: params })
      .then((result: any) => {
        this.options = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  //创建
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) return;
      // TODO 提交表单
      // console.log(this.formData);
      var params = {
        deviceId: this.formData.deviceId.join(","),
        persionCard: this.formData.persionCard,
        personCode: this.formData.personCode,
        personName: this.formData.personName,
        personPwd: this.formData.personPwd,
        stationId: this.stationId,
      };

      (this as any).$services
        .insertPersonDevice({ data: params, method: "post" })
        .then((result: any) => {
          if (result.code === 200) {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            this.$emit("cancelForm");
          }
          // console.log(result);
        })
        .catch((err: object) => {
          console.log(err);
        });
    });
  }
  //   取消
  cancelForm() {
    this.$emit("cancelForm");
  }
}
</script>

<style lang="scss" scoped>
.newuser-pop {
  width: 100%;
  height: 3.7rem;
  .btn-ground {
    height: 1rem;
  }
}
</style>

